<a href='https://github.com/angular/angular.js/edit/v1.3.x/src/ng/directive/ngNonBindable.js?message=docs(ngNonBindable)%3A%20describe%20your%20change...#L3' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a>



<a href='https://github.com/angular/angular.js/tree/v1.3.13/src/ng/directive/ngNonBindable.js#L3' class='view-source pull-right btn btn-primary'>
  <i class="glyphicon glyphicon-zoom-in">&nbsp;</i>View Source
</a>


<header class="api-profile-header">
  <h1 class="api-profile-header-heading">ngNonBindable</h1>
  <ol class="api-profile-header-structure naked-list step-list">
    
    <li>
      - directive in module <a href="api/ng">ng</a>
    </li>
  </ol>
</header>



<div class="api-profile-description">
  <p>The <code>ngNonBindable</code> directive tells Angular not to compile or bind the contents of the current
DOM element. This is useful if the element contains what appears to be Angular directives and
bindings but which should be ignored by Angular. This could be the case if you have a site that
displays snippets of code, for instance.</p>

</div>




<div>
  

  
  <h2>Directive Info</h2>
  <ul>
    
    <li>This directive executes at priority level 1000.</li>
  </ul>

  
  <h2 id="usage">Usage</h2>
  <div class="usage">
  
    <ul>
    <li>as attribute:
        <pre><code>&lt;ANY&gt;&#10;...&#10;&lt;/ANY&gt;</code></pre>
      </li>
    <li>as CSS class:
        <pre><code>&lt;ANY class=&quot;&quot;&gt; ... &lt;/ANY&gt;</code></pre>
      </li>
    
  </div>
  
  


  
  <h2 id="example">Example</h2><p>In this example there are two locations where a simple interpolation binding (<code>{{}}</code>) is present,
but the one wrapped in <code>ngNonBindable</code> is left alone.</p>
<p>

<div>
  <a ng-click="openPlunkr('examples/example-example86', $event)" class="btn pull-right">
    <i class="glyphicon glyphicon-edit">&nbsp;</i>
    Edit in Plunker</a>

  <div class="runnable-example"
      path="examples/example-example86">

  
    <div class="runnable-example-file" 
      name="index.html"
      language="html"
      type="html">
      <pre><code>&lt;div&gt;Normal: {{1 + 2}}&lt;/div&gt;&#10;&lt;div ng-non-bindable&gt;Ignored: {{1 + 2}}&lt;/div&gt;</code></pre>
    </div>
  
    <div class="runnable-example-file" 
      name="protractor.js"
      type="protractor"
      language="js">
      <pre><code>it(&#39;should check ng-non-bindable&#39;, function() {&#10;  expect(element(by.binding(&#39;1 + 2&#39;)).getText()).toContain(&#39;3&#39;);&#10;  expect(element.all(by.css(&#39;div&#39;)).last().getText()).toMatch(/1 \+ 2/);&#10;});</code></pre>
    </div>
  

    <iframe class="runnable-example-frame" src="examples/example-example86/index.html" name="example-example86"></iframe>
  </div>
</div>


</p>

</div>


